<template>
	<view>
		<u-list @scrolltolower="reachBottom()" showScrollbar="false">
			<u-list-item v-for="(item, index) in list" :key="index">
				<view class="box">
					<view class="remark">
						<u--text :text="item.remark" color=" #2c3e50" :lines="1" size="25rpx"></u--text>				
						<view style="font-size: 20rpx;color: #a9a9a9;">
							{{getTime(item.createTime)}}
						</view>
					</view>
					<view style="margin-left: auto;">
						<text v-if="item.status==1" style="color: #e67e22;">+ {{item.money}}</text>
						<text v-if="item.status==-1" style="color: #57606f;">- {{item.money}}</text>
					</view>
				</view>
				<u-line length="85%"></u-line>
			</u-list-item>
			<u-loadmore :status="loadDate.status" :loading-text="loadDate.loadingText"
				:loadmore-text="loadDate.loadmoreText" :nomore-text="loadDate.nomoreText" />
		</u-list>
	</view>
</template>

<script>
	import SOtime from "../../js_sdk/fl-SOtime/SOtime.js"
	export default {
		data() {
			return {
				list: [],
				params: {
					pageNo: 1,
					pageSize: 15
				},
				loadDate: {
					ifBottomRefresh: false,
					status: 'loadmore',
					loadingText: '努力加载中~',
					loadmoreText: '轻轻上拉~',
					nomoreText: '没有数据了~'
				},
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			reachBottom() {
				if (this.loadDate.status != 'noMore') {
					this.loadDate.status = 'loading';
					this.loadDate.ifBottomRefresh = true
					//正式服去掉这个延时器
					this.getList()
				}
			},
			getList() {
				this.$axios({
					url: "user/usIncomeExpend/list",
					method: "post",
					data: {
						...this.params
					}
				}).then((res) => {
					//请求接口成功之后，判断加载状态，处理数据
					if (res.result.pages >= this.params.pageNo) {
						if (this.loadDate.ifBottomRefresh) {
							this.list = this.list.concat(res.result.list)
						} else {
							this.list = res.result.list
						}
					} else {
						this.loadDate.status = 'noMore'
					}
					if (this.params.pageNo >= res.result.pages) {
						this.loadDate.status = 'noMore'
					}
					this.params.pageNo++;
				})
			},
			getTime(time) {
				return SOtime.time3(time)
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.box {
		display: flex;
		height: 40rpx;
		padding: 20rpx 40rpx 40rpx 40rpx;

		.remark {
			width: 300rpx;
		}
	}
</style>
